<template>
  <div class="container">
    <div class="top_one wrapper_1200">
      <span>{{ $t(`page.index.topOne`) }}</span>
    </div>
    <div class="wrapper_1200 top">
      <product :productList="toponeList"></product>
      <!-- <div @click="goDetail(item)" class="item" v-for="(item, index) in toponeList" :key="index">
        <img class="pic" :src="topImg[index]" alt="">
        <div class="left_box">
          <el-image class="img" :src="item.image">
            <div slot="placeholder" class="image-slot">
              loading<span class="dot">...</span>
            </div>
          </el-image>
        </div>
        <div class="right_box">
          <div class="title line4">
            {{ item.storeName }}
          </div>
          <div class="num">
            <div class="price">
              <statistic :value="item.price" :currency="item.currency" />
            </div>
            <div class="sale">{{ (Math.floor(item.sales) + Math.floor(item.ficti)) || 0 }}
              {{ $t(`page.goodsDetail.sold`) }}
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <FloatWindow></FloatWindow>
  </div>
</template>

<script>

import { goShopDetail } from '@/utils/order.js';
import product from "@/components/product.vue";
export default {
  name: 'IndexPage',
  auth: false,
  components:{product},
  data() {
    return {
      topImg: [
        require('@/assets/images/top-list0.png'),
        require('@/assets/images/top-list1.png'),
        require('@/assets/images/top-list2.png')
      ]
    }
  },
  async asyncData({ app, error }) {
    let toponeList = await app.$axios.get(
      "/api/front/product/leaderboard"
    );
    return {
      toponeList: toponeList.data
    };
  },
  methods: {
    goDetail(item) {
      goShopDetail(item.id, this);
    },
  }
}
</script>
<style lang="scss" scoped>
.container {
  background: url('../../assets/images/top_one_bg.jpg') no-repeat center top;
  background-size: 100%;

  .top_one {
    width: 1200px;
    display: flex;
    margin: 0 auto;

    span {
      font-size: 40px;
      font-weight: normal;
      color: #00785E;
      margin: 117px auto 62px;
    }

  }

  .top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    .pic {
      position: absolute;
      width: 46px;
      height: 56px;
      z-index: 99;
    }

    .pic1 {
      left: 10px;
    }

    .pic2 {
      left: 625px;
    }

    .pic3 {
      left: 10px;
      top: 290px
    }

    .item {
      width: 585px;
      height: 260px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      cursor: pointer;

      .left_box {
        width: 260px;
        height: 260px;

        .img {
          width: 260px;
          height: 260px;
        }
      }

      .right_box {
        width: 325px;
        height: 260px;
        background: #FFFFFF;
        border-radius: 1px;
        padding: 22px 21px 40px;

        .title {
          height: 96px;
          line-height: 24px;
        }

        .num {
          margin-top: 84px;
          display: flex;
          justify-content: space-between;

          .price {
            font-size: 24px;
            font-weight: 900;
            color: #00785E;
          }

          .sale {
            font-size: 16px;
            color: #999999;
          }
        }
      }
    }
  }

}</style>

